<template>
	<div class="article">
		<!-- 操作栏 -->
		<div class="handle">
			<el-form :inline="true" class="form">
				<!-- <el-form-item label="分区选择:">
					<el-select v-model="tabsList[tabIndex].areaItem" placeholder="请选择分区" @change="onHandleChangeArea">
						<el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label=""><el-input v-model="tabsList[tabIndex].keyname" placeholder="模糊搜素 户名 户号 所属区域 管理单位"></el-input></el-form-item>
				<el-form-item label=""><el-button type="primary" @click="onHandleSearch">搜索</el-button></el-form-item>
				<el-form-item label="时间:">
					<el-date-picker v-model="tabsList[tabIndex].date" type="month" placeholder="选择月" @change="getThisMonth_userDev($event)"></el-date-picker>
				</el-form-item>
				<!-- <el-form-item label="">
				<el-date-picker
					v-model="tabsList[tabIndex].date"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					@change="getThisTime($event, 5)"
				></el-date-picker>
				</el-form-item> -->
			</el-form>
		</div>
		<!-- 表格 -->
		<div class="globalTable">
			<table class="innerTable">
				<thead>
					<tr>
						<th v-for="item in tabsList[tabIndex].columns" :key="item.key">
							<span>{{ item.name }}</span>
						</th>
						<th style="width: 80px; text-align: center;"><span>操作</span></th>
					</tr>
				</thead>
				<tbody>
					<template v-if="tabsList[tabIndex].list && tabsList[tabIndex].list.length">
						<tr v-for="(item, i) in tabsList[tabIndex].list" :key="i">
							<td>
								<span>{{ `${item.yearno}-${item.monthno}` }}</span>
							</td>
							<td>
								<span>{{ item.sbbh }}</span>
							</td>
							<td>
								<span>{{ item.uname }}</span>
							</td>
							<td>
								<span>{{ item.adnm }}</span>
							</td>
							<td>
								<span>{{ item.engman }}</span>
							</td>
							<td>
								<span>{{ item.bqnum }}</span>
							</td>
							<td>
								<span>{{ item.ysl }}</span>
							</td>
							<td class="btns" @click="onHandleListModelVisible({ ...item, $index: i, isWaterMeter: true, isDisabled: false })">
								<span style="margin-right: 0px">修改</span>
							</td>
						</tr>
					</template>
					<template v-else>
						<tr>
							<td colspan="8"><span style="line-height: 30px">暂时没有数据！</span></td>
						</tr>
					</template>
				</tbody>
			</table>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		tabIndex: {
			type: Number,
			default() {
				return 0;
			}
		},
		tabsList: {
			type: Array,
			default() {
				return [{}];
			}
		},
		areaList: {
			type: Array,
			default() {
				return [{}];
			}
		},
		onHandleChangeArea: {
			type: Function,
			default() {
				return () => {};
			}
		},
		onHandleChangeEngineering: {
			type: Function,
			default() {
				return () => {};
			}
		},
		onHandleChangeMonitor: {
			type: Function,
			default() {
				return () => {};
			}
		},
		onHandleSearch: {
			type: Function,
			default() {
				return () => {};
			}
		},
		// getThisTime
		onHandleDatePicker: {
			type: Function,
			default() {
				return () => {};
			}
		},
		// showThisChart_waterFactory
		onHandleRadioToogle: {
			type: Function,
			default() {
				return () => {};
			}
		},
		onHandleListModelVisible: {
			type: Function,
			default() {
				return () => {};
			}
		}
	},
	methods: {
		name() {}
	}
};
</script>

<style lang="scss" scoped="scoped">
@import './style.scss';
</style>